<div class="container">
  <div class="wrapper">
    <div nz-row nzType="flex" nzJustify="center" style="display: flex;align-items:center;margin-top: 5%;">
      <div
        nz-col
        nzXs="22"
        nzSm="18"
        nzMd="12"
        nzLg="14"
        nzXl="12"
        nzType="flex"
        nzJustify="center"
        class="bg-white rounded-md"
        style="height: 320px;"
      >
        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="13" nzXl="13" style="padding: 18px;">
          <form nz-form #loginDetailForm="ngForm">
            <h1>登录</h1>
            <p class="text-muted">请输入用户名和密码</p>
            <nz-form-item class="mb-md">
              <nz-form-control
                [nzValidateStatus]="userName.invalid && (userName.dirty || userName.touched) ? 'error' : ''"
                nzHasFeedback
              >
                <nz-input-group nzPrefixIcon="anticon anticon-user">
                  <input
                    #userName="ngModel"
                    autocomplete="off"
                    nz-input
                    style="height: 38px;"
                    [(ngModel)]="loginModel.userName"
                    name="userName"
                    placeholder="用户名"
                    required
                  />
                </nz-input-group>
                <nz-form-explain *ngIf="userName.dirty && userName.errors"> 请输入用户名！ </nz-form-explain>
              </nz-form-control>
            </nz-form-item>

            <nz-form-item>
              <nz-form-control
                [nzValidateStatus]="password.invalid && (password.dirty || password.touched) ? 'error' : ''"
                nzHasFeedback
              >
                <nz-input-group nzPrefixIcon="anticon anticon-lock">
                  <input
                    #password="ngModel"
                    autocomplete="off"
                    nz-input
                    style="height: 38px;"
                    type="password"
                    [(ngModel)]="loginModel.password"
                    name="password"
                    placeholder="密码"
                    required
                  />
                </nz-input-group>
                <nz-form-explain *ngIf="password.dirty && password.errors"> 请输入密码！ </nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <label nz-checkbox [(ngModel)]="rememberMe" name="rememberMe">7天内自动登录</label>
            </nz-form-item>

            <nz-form-item>
              <nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="6" nzXl="6">
                <button
                  nz-button
                  style="height: 38px;"
                  (click)="onLogin($event)"
                  nzType="primary"
                  [nzLoading]="loading"
                  nzBlock
                >
                  登录
                </button>
              </nz-col>
            </nz-form-item>
          </form>
        </div>
        <div
          nz-col
          nzXs="0"
          nzSm="0"
          nzMd="0"
          nzLg="11"
          nzXl="11"
          class="rounded-md"
          style="height: 320px;background-image: url(assets/img/audit.jpg);background-size:100% 100%;"
        ></div>
      </div>
    </div>
  </div>
</div>
